
<template>
  <div id="newYearW" :class='{"isiphone":$isiphone,"zore":lesstwo<3}'>
    <div>
      <div class="top">
        <div class="one-top">
          <img src="../../../wechat/static/images/logo.png" alt>
          <div class="cityBox" @click="showFilter('城市')">
            {{cityName?cityName:'城市'}}
            <img src="../../../wechat/static/images/dzsc_xl.png" alt>
          </div>
          <div @click="linkTo" class="icon"></div>
        </div>
        <div class="brand-desc">
          <div class="name">品牌 <span>BRAND</span></div>
          <div class="brand-item"> 
            <div @click="hideprimary(item.key)" :class="['brand-list',{'active':brandId == item.key}]" v-for="(item,index) in brandList"  :key="index">
              {{item.value}} 
            </div>
          </div>
        </div>
        <div class="three">
          <!-- <div class="hide" v-if="showBrand">
            <checklist ref="brandObject" title :options="brandList" v-model="brandId" label-position="left" @on-change="brandChange"></checklist>
            <div class="hide-btn">
              <a href="javascript:;" @click="hideCancel(2)">取消</a>
              <a href="javascript:;" @click="hideprimary(2)">确定</a>
            </div>
          </div> -->
        </div>
      </div>
      <div class="top-title">商品列表</div>
      <div class="middle">
        <!-- <ul>
          <li v-for="(item, index) in goodList" :key="index" @click="JumpItem(item)">
            <img :src="item.img" alt>
            <p>{{item.name}}</p>
            <span>¥ {{item.money}}</span>
          </li>
          <load-more :show-loading="false" tip="暂无更多数据" v-show="!showClass && !showBrand && isloading" background-color="#fbf9fe"></load-more>
        </ul> -->
        <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
          <li v-for="(item, index) in goodList" :key="index" @click="JumpItem(item)">
            <img :src="item.img" alt>
            <p>{{item.name}}</p>
            <span>¥ {{item.money}}</span>
          </li>
          <load-more :show-loading="false" tip="暂无更多数据" v-show="!showClass && !showBrand && isNoData" background-color="#fbf9fe"></load-more>
        </ul>
      </div>
    </div>
    <div  @click="scrollTopBtn" class="top-icon">
      <img src="../../../wechat/static/images/top.png" alt="">
    </div>
  </div>
</template>

<script>
import { Tabbar, TabbarItem, Checklist, Scroller, LoadMore } from "vux";
// import cc from './chooseCityC'
export default {
  name: "",
  data() {
    return {
      goodList: [],
      cityName: "",
      cityCode: "",
      brandId: '', //品牌
      classifyVal: '', //分类
      goodsName: "", //品牌名
      isOn: "y", //是否上架
      isOpen: "y", //是否公开
      notOpenIds: "", //非公开商品id
      openIds: "", //公开商品id
      pageIndex: 1, //第几页
      pageSize: 10, //每页大小
      type: "", //类型
      onFetching: false,
      showClass: false,
      showBrand: false,
      classType: "",
      brandList: [],
      isloading: false,
      isNoData: false,
      word: ""
    };
  },
  mounted() {
    
    this.findEsBrandByPage();
    this.findEsCategoryByPage();
  },
  watch:{
  },
  computed:{
    lesstwo(){
      return this.goodList.length
    }
  },
  activated(){
    if(this.cityCode!=localStorage.getItem('cityCode')){
      this.cityCode = localStorage.getItem('cityCode')||''
      this.cityName = localStorage.getItem('cityName')||''
      this.pageIndex = 1
      this.isloading = false
      this.isNoData = false
      this.goodList = []
      this.loadMore()
    }else {
      
    }
  },
  beforeCreate(){
    localStorage.setItem('userType','normal')
  },
  created() {},
  methods: {
    linkTo(){
      this.$router.push('/home')
    },
    inputChange(){
      this.pageIndex = 1
      this.goodList = []
      this.getList();
    },
    loadMore() {
      console.log(115)
      console.log(this.isNoData)
      console.log(this.isloading)
      if (this.isNoData || this.isloading || this.classifyVal === '') return;
      this.isloading = true;
      this.getList();
    },
    scrollTopBtn(){
      document.body.scrollTop=document.documentElement.scrollTop=0
    },
    getList() {
      let url =
        this.$CONSTANT.GOODS.findEsGoodsByPage +
        "?sessionId=" +
        this.$common.getCookie("sessionId");
      let param = {
        city: this.cityCode,
        brandId: this.brandId, //品牌
        categoryId: this.classifyVal.length === 0 ? "" : this.classifyVal, //分类
        goodsName: this.word, //品牌名
        isOn: this.isOn, //是否上架
        isUseRest: 'y',
        isOpen: this.isOpen, //是否公开this.word
        notOpenIds: this.notOpenIds, //非公开商品id
        openIds: this.openIds, //公开商品id
        pageIndex: this.pageIndex, //第几页
        pageSize: this.pageSize, //每页大小
        type: this.type //类型
      };
      console.log(param);
      console.log(this.classifyVal);
      // this.$vux.loading.show({
      //   text: "loading"
      // });
      this.$common.post(url, param, res => {
        setTimeout(() => {
          this.$vux.loading.hide()
        }, 800);
        this.isloading = false;
        this.pageIndex++;
        if (res.status == 200) {
          var bussData = res.data.bussData;
          bussData.forEach(element => {
            if(element.restNum>0){
              this.goodList.push({
                id: element.id,
                img: element.photos.length > 0 ? element.photos[0].fileUrl : "",
                name: element.goodsName,
                money: element.price
              });
            }
            if(element.type=='real'&&element.modelPrice){
              let arr = element.modelPrice.split('::')
              let arr2 = []
              arr.map(item=>{
                let arr1 = item.split('&&')
                arr2.push({
                  name:arr1[0],
                  price:arr1[1]
                })
              })
              this.goodList[this.goodList.length-1].money=arr2[0].price
            }
          });
          if (bussData.length < this.pageSize) {
            this.isNoData = true;
          }
        } else {
          this.$vux.toast.show({
            text: res.msg,
            type: "warn",
            width: "auto"
          });
        }
      });
    },
    hideprimary(id) {
      this.brandId = id
      localStorage.setItem('brandId',JSON.stringify(this.brandId))
      this.showClass = false;
      this.showBrand = false;
      this.pageIndex = 1
      this.isNoData = false
      this.goodList = [];
      this.getList();
    },
    hideCancel(type) {
      if (type == 1) {
        this.classifyVal = [];
        setTimeout(() => {
          this.showClass = false;
        }, 300);
      } else {
        this.brandId = [];
        setTimeout(() => {
          this.showBrand = false;
        }, 300);
      }
    },
    brandChange(val, label) {
      console.log("change", val, label);
      localStorage.setItem('brandId',JSON.stringify(this.brandId))
    },
    showFilter(type) {
      if (type == "城市") {
        this.showClass = false;
        this.showBrand = false;
        this.$router.push("./chooseCityC");
      } else if (type == "商品分类") {
        this.showClass = !this.showClass;
        this.showBrand = false;
      } else  if (type == "品牌"){
        this.showClass = false;
        this.showBrand = !this.showBrand;
      }
    },
    JumpItem(item) {
      this.$router.push({ path: "/goodD", query: { id: item.id } });
    },
    findEsCategoryByPage() {
      let url =
        this.$CONSTANT.GOODS.findEsCategoryByPage +
        "?sessionId=" +
        this.$common.getCookie("sessionId");
      let param = {
        pageIndex: 1, //第几页
        pageSize: 100 //每页大小
      };
      this.$common.post(url, param, res => {
        if (res.status == 200) {
          var bussData = res.data.bussData;
          bussData.forEach(element => {
            if(element.categoryName=='年节福利'){
              this.classifyVal = element.id
              console.log(253)
              console.log(this.classifyVal)
            }
            this.loadMore();
          });
        } else {
          this.$vux.toast.show({
            text: res.msg,
            type: "warn",
            width: "auto"
          });
        }
      });
    },
    findEsBrandByPage() {
      let userType = localStorage.getItem('userType')
      let url =
        this.$CONSTANT.GOODS.findEsBrandByPage +
        "?sessionId=" +
        this.$common.getCookie("sessionId");
      let param = {
        pageIndex: 1, //第几页
        pageSize: 1000, //每页大小
        isCustomUser:userType == 'special'?'y':'',
        isNormalUser:userType == 'normal'?'y':''
      };
      this.$common.post(url, param, res => {
        if (res.status == 200) {
          var bussData = res.data.bussData;
          bussData.forEach(element => {
            this.brandList.push({
              key: element.id,
              value: element.brandName
            });
          });
         
          console.log(this.brandList,'ssssssssssssssssssssssssss')
        } else {
          this.$vux.toast.show({
            text: res.msg,
            type: "warn",
            width: "auto"
          });
        }
      });
    }
  },
  components: {
    Tabbar,
    TabbarItem,
    Checklist,
    Scroller,
    LoadMore,
  }
};
</script>

<style lang="less">
#newYearW {
  .top-title{
    width:100%;
    height:36px;
    line-height: 36px;
    text-align: center;
    font-size:15px;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(0,0,0,1);
    background:rgba(255,255,255,1);
    margin-top: 15px;
    margin-bottom: 12px;
  }
  .top {
  //  height: 52.5px;
    background: #fff;
    > img {
      margin-top: 19px;
      margin-left: 11px;
      height: 27px;
      width: 22.4%;
    }
    .brand-desc{
      background:rgba(255,255,255,1);
      border-radius:0px 0px 20px 20px;
      padding-left: 10px;
      background-color: #fff;
      overflow: hidden;
      margin-top: 52.5px;
      .name{
        color: #333333;
        font-size: 15px;
        height: 50px;
        line-height: 50px;
        span{
          font-size:15px;
          font-family:PingFang SC;
          font-weight:500;
          color:#999999;
        }
      }
      .brand-list{
        width:110px;
        height:38px;
        border:1px solid rgba(153,153,153,1);
        border-radius:18.5px 19px 19px 18.5px;
        font-size:15px;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(153,153,153,1);
        text-align: center;
        line-height: 38px;
        float: left;
        margin-right: 8px;
        margin-bottom: 24px;
        &.active{
          background:rgba(238,60,74,1);
          color: #fff;
        }
      }
    }
    .one-top {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #fff;
      padding: 0px 0 0px 11px;
      height: 52.5px;
      box-shadow: 3px 1px 3px #eae2e2;
      >img {
        height:21.5px;
        width: 93px;
        position: relative;
        top: 15px;
        vertical-align: super;
      }
      .icon{
        background-image: url('../../../wechat/static/images/home.png');
        background-size: 100% 100%;
        height: 17.5px;
        width: 19px;
        position: absolute;
        right: 15px;
        top: 15px;
      }
      .cityBox{
        display: inline;
        font-family: PingFang-SC-Medium;
        font-size: 15px;
        color: #333;
        cursor: pointer;
        margin-top: 10px;
        margin-right: 0;
        position: relative;
        top: 3px;
        right: 70px;
        float: right;
        img{
          width: 8px;
          height: 5px;
          vertical-align: middle;
        }
      }
    }
    .one {
      background: #f7f7f7;
      display: inline-block;
      width: 64.3%;
      margin: 13px 0 13px 21px;
      border: 1px solid transparent;
      border-radius: 16px;
      margin-left: 32.3%;
      img {
        width: 15px;
        height: 15px;
        vertical-align: middle;
        padding-left: 15px;
      }
      input {
        font-family: MicrosoftYaHeiUI;
        font-size: 13px;
        color: #333;
        border: none;
        padding: 8px 8px;
        background: #f7f7f7;
        width: 55%;
      }
    }
    .two {
      padding: 0px 0 0px 11px;
      a {
        display: inline-block;
        background: #f7f7f7;
        border: 1px solid transparent;
        border-radius: 17px;
        text-align: center;
        width: 25.3%;
        height: 28px;
        line-height: 28px;
        margin-right: 10px;
        overflow: hidden;
        span {
          font-family: PingFang-SC-Medium;
          font-size: 13px;
          color: #999;
        }
        img {
          margin-left: 5px;
          width: 8px;
          height: 5px;
          vertical-align: middle;
          transition: 0.3s ease-in-out all;
          transform: rotateX(0deg);
        }
      }
      .active {
        img {
          transition: 0.3s ease-in-out all;
          transform: rotateX(180deg);
        }
      }
    }
    .three {
      // margin-top: 13px;
      .hide {
        > div {
          max-height: 200px;
          overflow-y: scroll;
        }
        .weui-cells_checkbox {
          &:before,
          &:after {
            border: none;
          }
          .weui-check_label {
            height: 53px;
            line-height: 53px;
            border-color: #e9e9e9;
            margin-right: 10px;
            margin: 0 10px 0 15px;
            padding: 0;
            .weui-cell__hd {
              padding-right: 0;
              .weui-icon-checked {
                &:before {
                  font-size: 17px;
                  color: #ec1b24;
                }
              }
            }
            .weui-cell__bd {
              p {
                color: #343434;
                font-family: PingFang-SC-Medium;
                font-size: 14px;
              }
            }
            border-bottom: 1px solid #e9e9e9;
            &:before {
              border: none;
            }
            &::after {
            }
          }
        }
        .hide-btn {
          // height: 99px;
          text-align: center;
          padding-top: 42px;
          padding-bottom: 23px;
          background: #fff;
          a {
            display: inline-block;
            height: 34px;
            width: 28.8%;
            line-height: 34px;
            text-align: center;
            border: 1px solid transparent;
            border-radius: 17px;
            font-family: PingFang-SC-Bold;font-weight: 600;
            font-size: 13px;
            &:first-child {
              background: #ededed;
              color: #999999;
            }
            &:last-child {
              margin-left: 10px;
              background: #ee3c4a;
              color: #fff;
            }
          }
        }
      }
    }
  }
  .middle {
    margin: 10px;
    margin-top: 0px;
    // padding-top: 200px;
    ul {
      li {
        display: inline-block;
        width: 48.15%;
        background: #fff;
        border: 0px solid transparent;
        border-radius: 5px;
        margin-bottom: 10px;
        img {
          display: inline-block;
          width: 100%;
          height: 46.1%;
          height: 173px;
          object-fit: contain;
        }
        p {
          // padding: 12px;
          padding: 2.6%;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          font-family: PingFang-SC-Bold;font-weight: 600;
          color: #333;
          font-size: 14px;
          height: 34px;
          // height: 9%;
        }
        span {
          display: inline-block;
          font-family: PingFang-SC-Bold;font-weight: 600;
          color: #ea030b;
          font-size: 14px;
          margin: 0 12px 12px 12px;
        }
        &:nth-child(2n) {
          float: right;
        }
      }
    }
  }
  .weui-tabbar {
    position: fixed;
    .weui-tabbar__item {
      img {
        width: 21px;
        height: 21px;
        margin-top: 3px;
      }
    }
    .weui-bar__item_on {
      img {
        width: 23px;
        height: 21px;
      }
      .weui-tabbar__label {
        span {
          font-family: PingFang-SC-Medium;
          font-size: 12px;
          color: #ec1b24;
        }
      }
    }
    &:before {
      border: none;
    }
  }
}
</style>
